Использование аналитики в режиме реального времени с Streaming SQL

Что такое Streaming SQL и как этот подход может использоваться для получения аналитических данных в режиме реального времени из потоков данных в Kafka

https://dzone.com/articles/real-time-insights-with-streaming-sql-on-kafka

Слайдер для сравнения изображений на JavaScript

Руководство по созданию слайдера в 6 строк кода.

https://muffinman.io/blog/image-comparison-slider/

code-inspector

Кликайте на элемент в браузере и он откроется в IDE.

https://github.com/zh-lx/code-inspector

Как предотвратить SQL-инъекции в WordPress

Эффективные методы защиты WordPress-сайтов от атак SQL-инъекций, включая использование скрытие версии WordPress, внедрение плагинов безопасности и регулярные обновления системы.

https://www.smashingmagazine.com/2025/03/how-prevent-wordpress-sql-injection-attacks/

Используем EJS-шаблоны в Node.js приложении

Как интегрировать EJS (Embedded JavaScript) в приложение Node.js для создания динамических страниц: основные шаги, создание шаблонов и передача данных из серверной части в клиентскую.

https://blog.logrocket.com/how-to-use-ejs-template-node-js-application/

#советы #начинающим

Не покупайте грузовик для похода за хлебом и другие принципы программирования

Мне недавно встретился код вывода количества FPS на экран, написанный начинающим программистом, и в этом коде был базовый класс, класс-потомок, виртуальные функции, конструктор с множеством параметров, variant. Код позволял выводить любое количество счетчиков FPS на экран разными шрифтами, но все, что было на самом деле нужно, это простая функция на 3 строки, считающая количество FPS и выводящая его на экран.

⭐️◽️◽️◽️◽️

📖 Читать

Погружаемся в React Server Components

Узнаем, чем RSC отличается от классических CSR и SSR, какие у них преимущества и как интегрировать RSC в приложение на React.

https://tonyalicea.dev/blog/understanding-react-server-components/

TypeScript теперь в 10 раз быстрее

Как удалось улучшить перфоманс и что это значит для разработчиков.

https://devblogs.microsoft.com/typescript/typescript-native-port/

command и commandfor в Сhrome 135

О новых атрибутах command и commandfor, которые упрощают добавление декларативного поведения кнопкам без использования JavaScript. Эти атрибуты позволяют напрямую связывать кнопки с элементами, улучшая доступность и удобство управления.


https://developer.chrome.com/blog/command-and-commandfor

Делаем разработку более эффективной с document.designMode

Что такое designMode, как его включить и как с помощью него изменять контент без изменения кода.

https://www.smashingmagazine.com/2025/03/previewing-content-changes-work-documentdesignmode/

Карусели на чистом CSS

Новые возможности CSS Overflow 5, которые доступны в Chrome 135, позволяют еще проще создавать карусели используя ::scroll-button() и ::scroll-marker().

https://developer.chrome.com/blog/carousels-with-css

Разбираем Pino: как работает самый быстрый логер для Node.js

Чем Pino отличается от других логеров и как удалось достигнуть такой производительности.

https://habr.com/ru/articles/894646/

Небольшое руководство по использованию Link в Next.js

Базовое применение компонента, динамическое создание ссылок, способы обработки активных ссылок с помощью хука usePathname. А также немного о предварительной загрузке страниц (prefetching), замене записей в истории браузера (replace vs. push) и управлении поведением прокрутки при навигации.

https://dev.to/joodi/a-comprehensive-guide-to-the-nextjs-link-component-29jf

Мокаем сложные API запросы с Mirage JS

Туториал по работе с Mirage JS — как создать фейковые серверы, модели данных и маршруты, чтобы упростить разработку и тестирование. Примеры настройки сложных сценариев.

https://blog.logrocket.com/mocking-complex-apis-mirage-js/

Более точная отладка производительности в DevTools

В DevTools Chrome 134 появился инструмент калибровки CPU throttling, позволяющий создавать индивидуальные пресеты для эмуляции производительности мобильных устройств. Это помогает приблизиться к реальными условиями использования, обеспечивая более точную настройку и выявление проблем производительности.

https://developer.chrome.com/blog/devtools-grounded-real-world?hl=en

Разработка тёмной темы

О важных аспектах дизайна при реализации темной темы: контраст, типография, доступность.

https://www.smashingmagazine.com/2025/04/inclusive-dark-mode-designing-accessible-dark-themes/

Подробное руководство по лучшим практикам тестирования Node.js приложений

Более 50 практик, охватывающих такие темы, как стратегия тестирования, настройка БД и инфраструктуры, конфигурация веб-сервера, интеграционное тестирование, работа с данными, очереди сообщений и методы мокинга.

https://github.com/goldbergyoni/nodejs-testing-best-practices#readme

Экспериментальные функции в React: ViewTransition и Activity

Компонент <ViewTransition> позволяет легко добавлять анимации при переходах между состояниями интерфейса, используя новый API браузера startViewTransition.
Компонент <Activity> предоставляет возможность управлять отображением частей UI, скрывая или показывая их в зависимости от активности.

https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more

Эффект в форме капли при наведении

Новые возможности (доступные пока только в Chrome) использования функции shape(), позволяющие делать плавные переходы между произвольными формами на чистом CSS.

https://css-tip.com/blob-hover/

Стилизация alt текста

Интересный подход от Энди Белла по оформлению альтернативного текста для изображения, которое не загрузилось.

https://css-tricks.com/you-can-style-alt-text-like-any-other-text/